
<template>
	<div class="xiaoshouqudao">
    <div style="background: #fff;" v-loading="loading">

      <div style="padding:0 20px 20px;">
        <div style="margin-bottom: 20px; ">{{$route.query.source_name}}集运提单编码配置</div>
        <el-button type="primary" round @click="logshow">添加渠道提单编码</el-button>
      </div>

      <div style="padding:0 20px;">
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop='channel_name' label="接口渠道"></el-table-column>
          <el-table-column prop='created_at' label="提单编码"></el-table-column>
          <el-table-column prop='source_amount' label="添加时间"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="bianji(scope.row)">编辑</el-button>
              <el-button type="text" @click="shanchuqudao(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog title="添加渠道提单编码" center :visible.sync="log" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form ref="all" :model="all" label-width="80px" @submit.native.prevent>
          <el-form-item label="渠道名字">
            <el-input v-model="all.channel_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="add">确定</el-button>
        </span>
      </el-dialog>


      <el-dialog :title="all2.title" center  :visible.sync="log2" width="1000px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-table :data="list2" border style="width: 100%">
          <el-table-column prop='source_name' label="来源名称"></el-table-column>
          <el-table-column prop='created_at' label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="shanchulaiyuan(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-form ref="all" :model="all" inline label-width="80px" @submit.native.prevent style="margin-top: 20px;">
          <el-form-item label="来源名称:">
             <el-input v-model="all2.source_name"></el-input>
          </el-form-item>
          <el-button type="primary" round @click="add2">添加</el-button>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" round @click="log2 = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'xiaoshouqudao',
    data() {
      return {
        all: {
          id: "",
          seller_id: ""
        },
        all2: {
          title: "",
          channel_id: "",
          source_name: "",
          id: ""
        },
        list: [],
        list2: [],
        total: 0,
        loading: false,
        log: false,
        log2: false,
        search: {
          channel_id:this.$route.query.id,
          user_defined_name:"",
          page: 1,
          page_size: 20
        }
      }
    },
    created() {
      this.getlist()
    },
    methods:{
      bianji:function(item){
        this.all = {
          channel_name: item.channel_name,
          id: item.id
        }
        this.log = true
      },
      shanchuqudao:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.post('/api/form/channel/delete',{id:item.id})
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        this.$message.success('已删除渠道！');
                        this.getlist()
                      } else {
                        this.$message.error(response.data.msg.info);
                      }
                    })
                })
      },
      shanchulaiyuan:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.post('/api/form/source/delete',{id:item.id})
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        this.$message.success('已删除来源！');
                        this.getlist2(this.all2.channel_id)
                      } else {
                        this.$message.error(response.data.msg.info);
                      }
                    })
                })
      },
      logshow: function() {
        this.all = {
          id: "",
          seller_id: ""
        }
        this.log = true
      },
      add: function() {
        axios.post('/api/form/upstream-channel/sources/make', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //获取列表
      getlist: function() {
        this.loading = true
        axios.get('/api/plan-market/upstream/channel/config/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              // this.list = JSON.parse(response.data.data.seller_id)
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.page = page
        this.getlist()
      },
      logshow2: function(item) {

        this.all2 = {
          title: item.channel_name + '订单来源',
          channel_id: item.id,
          source_name: "",
          id: ""
        }
        this.getlist2(this.all2.channel_id)
        this.log2 = true
      },
      add2: function() {
        axios.post('/api/form/source/make', this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getlist2(this.all2.channel_id)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist2: function(channel_id) {
        axios.get('/api/form/sources?channel_id='+channel_id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list2 = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .xiaoshouqudao {
    /deep/ .el-button--primary {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
  }
</style>
